<template>
  <div class="activity-detail-page">
    <!-- 返回按钮 -->
    <div class="back-link">
      <el-button link @click="router.back()">
        <el-icon><ArrowLeft /></el-icon>
        返回列表
      </el-button>
    </div>

    <!-- 活动内容 -->
    <div class="detail-container">
      <!-- 活动基本信息 -->
      <div class="activity-header">
        <div class="cover-image">
          <el-image :src="activity.image" fit="cover" />
          <div class="activity-status" :class="activity.status">
            {{ activity.statusText }}
          </div>
        </div>
        <div class="header-info">
          <div class="tags">
            <el-tag 
              v-for="tag in activity.tags" 
              :key="tag"
              :type="getTagType(tag)"
              effect="light"
              class="tag-item"
            >
              {{ tag }}
            </el-tag>
          </div>
          <h1>{{ activity.title }}</h1>
          <div class="meta-info">
            <div class="info-item">
              <el-icon><Calendar /></el-icon>
              <span>活动时间：{{ formatDate(activity.date) }}</span>
            </div>
            <div class="info-item">
              <el-icon><Location /></el-icon>
              <span>活动地点：{{ activity.location }}</span>
            </div>
            <div class="info-item">
              <el-icon><Timer /></el-icon>
              <span>活动时长：{{ activity.duration }}</span>
            </div>
            <div class="info-item">
              <el-icon><User /></el-icon>
              <span>已报名：{{ activity.participants }} 人</span>
            </div>
          </div>

          <!-- 报名按钮 -->
          <div class="action-buttons">
            <el-button 
              type="primary" 
              size="large" 
              :disabled="activity.status === 'ended'"
              @click="showSignupDialog"
            >
              {{ getActionButtonText(activity.status) }}
            </el-button>
            <el-button size="large" @click="shareActivity">
              <el-icon><Share /></el-icon>
              分享活动
            </el-button>
          </div>
        </div>
      </div>

      <!-- 活动详情标签页 -->
      <div class="activity-detail">
        <el-tabs v-model="activeTab">
          <el-tab-pane label="活动详情" name="detail">
            <div class="detail-section">
              <h3>活动介绍</h3>
              <p>{{ activity.description }}</p>
              
              <h3>活动安排</h3>
              <el-timeline>
                <el-timeline-item
                  v-for="(schedule, index) in activity.schedule"
                  :key="index"
                  :timestamp="schedule.time"
                >
                  {{ schedule.content }}
                </el-timeline-item>
              </el-timeline>

              <h3>注意事项</h3>
              <ul class="notice-list">
                <li v-for="(notice, index) in activity.notices" :key="index">
                  {{ notice }}
                </li>
              </ul>

              <h3>活动地点</h3>
              <div class="location-info">
                <div class="address">
                  <p>{{ activity.fullAddress }}</p>
                  <el-button link type="primary" @click="copyAddress">
                    <el-icon><CopyDocument /></el-icon>
                    复制地址
                  </el-button>
                </div>
                <div class="map-container">
                  <!-- 这里可以集成地图组件 -->
                  <el-image :src="activity.locationImage" fit="cover" />
                </div>
              </div>
            </div>
          </el-tab-pane>
          
          <el-tab-pane label="报名须知" name="requirements">
            <div class="requirements-section">
              <h3>参与要求</h3>
              <ul class="requirements-list">
                <li v-for="(req, index) in activity.requirements" :key="index">
                  {{ req }}
                </li>
              </ul>

              <h3>装备要求</h3>
              <div class="equipment-list">
                <div v-for="(equip, index) in activity.equipment" 
                     :key="index"
                     class="equipment-item">
                  <el-icon><Check /></el-icon>
                  <span>{{ equip }}</span>
                </div>
              </div>

              <h3>安全须知</h3>
              <div class="safety-notice">
                <p v-for="(notice, index) in activity.safetyNotices" 
                   :key="index"
                   class="safety-item">
                  {{ notice }}
                </p>
              </div>
            </div>
          </el-tab-pane>

          <el-tab-pane label="报名记录" name="participants">
            <div class="participants-section">
              <div class="participants-list">
                <div v-for="record in activity.participantRecords" 
                     :key="record.id" 
                     class="participant-item">
                  <div class="user-info">
                    <el-avatar :src="record.avatar" :size="40" />
                    <div class="info">
                      <span class="name">{{ record.name }}</span>
                      <span class="time">{{ record.signupTime }}</span>
                    </div>
                  </div>
                  <div class="message" v-if="record.message">
                    {{ record.message }}
                  </div>
                </div>
              </div>
            </div>
          </el-tab-pane>
        </el-tabs>
      </div>
    </div>

    <!-- 报名对话框 -->
    <el-dialog
      v-model="signupDialogVisible"
      title="活动报名"
      width="500px"
      :close-on-click-modal="false"
    >
      <div class="signup-form">
        <el-form ref="formRef" :model="signupForm" :rules="rules" label-width="100px">
          <el-form-item label="姓名" prop="name">
            <el-input v-model="signupForm.name" placeholder="请输入真实姓名" />
          </el-form-item>
          <el-form-item label="手机号码" prop="phone">
            <el-input v-model="signupForm.phone" placeholder="请输入手机号码" />
          </el-form-item>
          <el-form-item label="身份证号" prop="idCard">
            <el-input v-model="signupForm.idCard" placeholder="请输入身份证号" />
          </el-form-item>
          <el-form-item label="紧急联系人" prop="emergency">
            <el-input v-model="signupForm.emergency" placeholder="请输入紧急联系人" />
          </el-form-item>
          <el-form-item label="联系人电话" prop="emergencyPhone">
            <el-input v-model="signupForm.emergencyPhone" placeholder="请输入紧急联系人电话" />
          </el-form-item>
          <el-form-item label="留言" prop="message">
            <el-input
              v-model="signupForm.message"
              type="textarea"
              :rows="3"
              placeholder="请输入留言（选填）"
            />
          </el-form-item>
        </el-form>
      </div>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="signupDialogVisible = false">取消</el-button>
          <el-button type="primary" @click="submitSignup">
            确认报名
          </el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { useRouter, useRoute } from 'vue-router'
import { ElMessage } from 'element-plus'
import {
  ArrowLeft,
  Calendar,
  Location,
  Timer,
  User,
  Share,
  CopyDocument,
  Check
} from '@element-plus/icons-vue'

const router = useRouter()
const route = useRoute()
const activeTab = ref('detail')
const signupDialogVisible = ref(false)

// 表单相关
const formRef = ref(null)
const signupForm = ref({
  name: '',
  phone: '',
  idCard: '',
  emergency: '',
  emergencyPhone: '',
  message: ''
})

const rules = {
  name: [{ required: true, message: '请输入姓名', trigger: 'blur' }],
  phone: [{ required: true, message: '请输入手机号码', trigger: 'blur' }],
  idCard: [{ required: true, message: '请输入身份证号', trigger: 'blur' }],
  emergency: [{ required: true, message: '请输入紧急联系人', trigger: 'blur' }],
  emergencyPhone: [{ required: true, message: '请输入紧急联系人电话', trigger: 'blur' }]
}

// 示例数据
const activity = ref({
  id: 1,
  title: '海滩清洁日',
  description: '组织志愿者清理海滩垃圾，保护海洋环境。活动提供清洁工具和装备，为海洋生态尽一份力！我们将组织志愿者沿着海岸线进行垃圾清理，记录垃圾类型，并进行分类回收。同时，专业人员将为志愿者讲解海洋垃圾对生态环境的影响，以及如何在日常生活中减少塑料使用。',
  image: 'https://images.unsplash.com/photo-1621451537084-482c73073a0f?w=800',
  date: '2024-04-15',
  location: '深圳湾海滩',
  fullAddress: '广东省深圳市南山区深圳湾滨海休闲带',
  locationImage: 'https://images.unsplash.com/photo-1621451537084-482c73073a0f?w=800',
  status: 'upcoming',
  statusText: '即将开始',
  participants: 128,
  duration: '3小时',
  tags: ['环保行动', '海滩清洁', '团队活动'],
  schedule: [
    { time: '08:30', content: '志愿者签到、领取装备' },
    { time: '09:00', content: '活动说明会、安全须知讲解' },
    { time: '09:30', content: '开始海滩清洁活动' },
    { time: '11:30', content: '垃圾分类与统计' },
    { time: '12:00', content: '活动总结、合影留念' }
  ],
  notices: [
    '请准时到达集合地点',
    '活动全程需要佩戴口罩',
    '请穿着轻便运动服装和防滑鞋',
    '现场提供饮用水，建议自带水杯',
    '活动结束后将发放志愿者证书'
  ],
  requirements: [
    '年龄要求：18-60周岁',
    '身体健康，无传染性疾病',
    '具有环保意识和责任心',
    '能够完成3小时户外活动'
  ],
  equipment: [
    '防晒用品（帽子、防晒霜）',
    '换洗衣物',
    '个人餐具',
    '雨具（以防下雨）'
  ],
  safetyNotices: [
    '活动期间请听从工作人员指挥',
    '注意防晒防暑，多补充水分',
    '如遇身体不适及时告知工作人员',
    '发现危险物品请勿擅自处理'
  ],
  participantRecords: [
    {
      id: 1,
      name: '张先生',
      avatar: 'https://avatars.githubusercontent.com/u/1?v=4',
      signupTime: '2024-03-15 14:30',
      message: '期待参与海滩清洁活动！'
    },
    {
      id: 2,
      name: '李女士',
      avatar: 'https://avatars.githubusercontent.com/u/2?v=4',
      signupTime: '2024-03-15 13:25'
    }
  ]
})

// 方法
const formatDate = (date) => {
  return new Date(date).toLocaleDateString('zh-CN', {
    year: 'numeric',
    month: 'long',
    day: 'numeric',
    weekday: 'long'
  })
}

const getTagType = (tag) => {
  const tagTypes = {
    '环保行动': 'success',
    '海洋保护': 'primary',
    '科研活动': 'warning',
    '动物保护': 'danger',
    '环境教育': 'info'
  }
  return tagTypes[tag] || ''
}

const getActionButtonText = (status) => {
  switch (status) {
    case 'ended':
      return '活动已结束'
    case 'ongoing':
      return '立即报名'
    case 'upcoming':
      return '预约报名'
    default:
      return '了解详情'
  }
}

const showSignupDialog = () => {
  signupDialogVisible.value = true
}

const submitSignup = async () => {
  if (!formRef.value) return
  
  try {
    await formRef.value.validate()
    // 这里应该调用实际的报名API
    ElMessage.success('报名成功！')
    signupDialogVisible.value = false
  } catch (error) {
    console.error('表单验证失败:', error)
  }
}

const shareActivity = () => {
  ElMessage.success('分享功能开发中')
}

const copyAddress = () => {
  navigator.clipboard.writeText(activity.value.fullAddress)
  ElMessage.success('地址已复制到剪贴板')
}

onMounted(() => {
  // 这里应该根据路由参数获取活动详情
  console.log('Activity ID:', route.params.id)
})
</script>

<style scoped lang="scss">
.activity-detail-page {
  min-height: 100vh;
  background-color: #f5f7fa;
  padding: 40px 0;

  .back-link {
    max-width: 1200px;
    margin: 0 auto 20px;
    padding: 0 20px;
  }

  .detail-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;

    .activity-header {
      background: white;
      border-radius: 16px;
      overflow: hidden;
      box-shadow: 0 2px 12px rgba(0, 0, 0, 0.05);
      margin-bottom: 30px;
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 40px;

      .cover-image {
        position: relative;
        aspect-ratio: 4/3;

        .el-image {
          width: 100%;
          height: 100%;
        }

        .activity-status {
          position: absolute;
          top: 20px;
          right: 20px;
          padding: 8px 16px;
          border-radius: 20px;
          font-size: 14px;
          font-weight: 500;
          color: white;

          &.ongoing {
            background: rgba(103, 194, 58, 0.9);
          }

          &.upcoming {
            background: rgba(64, 158, 255, 0.9);
          }

          &.ended {
            background: rgba(144, 147, 153, 0.9);
          }
        }
      }

      .header-info {
        padding: 40px 40px 40px 0;
        display: flex;
        flex-direction: column;
        gap: 20px;

        .tags {
          display: flex;
          gap: 8px;
          flex-wrap: wrap;
        }

        h1 {
          font-size: 28px;
          color: #1f2937;
          line-height: 1.4;
          margin: 0;
        }

        .meta-info {
          display: grid;
          grid-template-columns: repeat(2, 1fr);
          gap: 16px;
          padding: 20px;
          background: #f8fafc;
          border-radius: 12px;

          .info-item {
            display: flex;
            align-items: center;
            gap: 8px;
            color: #64748b;

            .el-icon {
              font-size: 18px;
              color: #409EFF;
            }
          }
        }

        .action-buttons {
          display: flex;
          gap: 16px;
          margin-top: auto;
        }
      }
    }

    .activity-detail {
      background: white;
      border-radius: 16px;
      padding: 30px;
      box-shadow: 0 2px 12px rgba(0, 0, 0, 0.05);

      .detail-section,
      .requirements-section,
      .participants-section {
        h3 {
          font-size: 20px;
          color: #1f2937;
          margin: 30px 0 20px;
          font-weight: 600;

          &:first-child {
            margin-top: 0;
          }
        }

        p {
          color: #4b5563;
          line-height: 1.8;
          margin-bottom: 20px;
        }

        .notice-list,
        .requirements-list {
          list-style: none;
          padding: 0;
          margin: 0 0 30px;

          li {
            position: relative;
            padding-left: 24px;
            margin-bottom: 12px;
            color: #4b5563;

            &::before {
              content: "•";
              color: #409EFF;
              position: absolute;
              left: 0;
              font-size: 20px;
              line-height: 1;
            }
          }
        }

        .location-info {
          .address {
            display: flex;
            align-items: center;
            gap: 16px;
            margin-bottom: 20px;
            padding: 16px;
            background: #f8fafc;
            border-radius: 8px;

            p {
              margin: 0;
              flex: 1;
            }
          }

          .map-container {
            border-radius: 12px;
            overflow: hidden;
            height: 300px;

            .el-image {
              width: 100%;
              height: 100%;
            }
          }
        }

        .equipment-list {
          display: grid;
          grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
          gap: 16px;
          margin-bottom: 30px;

          .equipment-item {
            display: flex;
            align-items: center;
            gap: 8px;
            padding: 12px 16px;
            background: #f8fafc;
            border-radius: 8px;
            color: #4b5563;

            .el-icon {
              color: #409EFF;
            }
          }
        }

        .safety-notice {
          background: #fff7ed;
          border-radius: 12px;
          padding: 20px;

          .safety-item {
            position: relative;
            padding-left: 24px;
            margin-bottom: 12px;
            color: #9a3412;

            &:last-child {
              margin-bottom: 0;
            }

            &::before {
              content: "!";
              position: absolute;
              left: 0;
              color: #ea580c;
              font-weight: bold;
            }
          }
        }

        .participants-list {
          .participant-item {
            padding: 20px;
            border-bottom: 1px solid #e5e7eb;

            &:last-child {
              border-bottom: none;
            }

            .user-info {
              display: flex;
              align-items: center;
              gap: 12px;
              margin-bottom: 8px;

              .info {
                .name {
                  display: block;
                  font-weight: 500;
                  color: #1f2937;
                }

                .time {
                  font-size: 13px;
                  color: #64748b;
                }
              }
            }

            .message {
              margin-left: 52px;
              color: #4b5563;
              font-size: 14px;
            }
          }
        }
      }
    }
  }
}

// 移动端适配
@media (max-width: 768px) {
  .activity-detail-page {
    padding: 20px 0;

    .detail-container {
      .activity-header {
        grid-template-columns: 1fr;
        gap: 0;

        .header-info {
          padding: 20px;

          .meta-info {
            grid-template-columns: 1fr;
          }
        }
      }
    }
  }
}
</style> 